<template>
  <div>
    <div class="cash">
      <!-- 表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="120px"
      >
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="店铺ID/名称">
              <el-input
                v-model="formInline.controlNo"
                placeholder="店铺ID/名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户ID/昵称">
              <el-input v-model="formInline.name" placeholder="用户ID/昵称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="formInline.state" placeholder="状态">
                <el-option label="待处理" value="待处理" />
                <el-option label="已提现" value="已提现" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="提现单号">
              <el-input v-model="formInline.odd" placeholder="提现单号" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="申请提现日期">
              <el-date-picker
                v-model="formInline.withdrawaltime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <template>
              <el-button
                size="medium"
                class="searchs"
                @click="search"
              >查询</el-button>
              <el-button size="medium" @click="resetting">重置</el-button>
            </template>
          </el-col>
        </el-row>
      </el-form>
      <!--/ 表单 -->
    </div>
    <el-card class="hr-block">
      <el-table
        :data="list"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column label="交易类型" sortable prop="type" />
        <el-table-column label="店铺ID/用户ID" prop="controlNo" />
        <el-table-column label="店铺名称/昵称" prop="name" />
        <el-table-column label="提现单号" sortable prop="odd" />
        <el-table-column label="提现金额" sortable prop="money">
          <template slot-scope="{ row }">
            <span>{{ row.money + ' 元' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" sortable prop="time">
          <template slot-scope="scope">
            <span>{{ scope.row.time | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" sortable prop="state" />
        <el-table-column label="提现时间" sortable prop=" withdrawaltime">
          <template slot-scope="scope">
            <span>{{ scope.row.withdrawaltime | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提现备注" prop="remarks" />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >处理</el-button>
          </template>
        </el-table-column></el-table>
      <!-- 分页组件 -->
      <div class="block">
        <el-row
          type="flex"
          align="middle"
          justify="center"
          style="height: 60px"
        >
          <el-pagination
            background
            :page-sizes="[2, 4, 8, 10]"
            :current-page.sync="page.page"
            :page-size="page.pageSize"
            layout="total, prev, pager, next"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </el-card>
    <!-- 弹出层 -->
    <el-dialog
      title="确认用户/商户“xxxxx”提现申请已打款"
      :visible.sync="showDialog"
    >
      <el-form :model="form">
        <el-form-item label="备注">
          <el-input
            v-model="form.remarks"
            type="textarea"
            placeholder="请输入内容"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="call">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllcash, editcash, getAllCashByTags } from '@/api/accounting'
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      formInline: {
        controlNo: '',
        name: '',
        state: '',
        odd: '',
        withdrawaltime: ''
      },
      form: {},

      showDialog: false,
      page: {
        page: 1, // 数据总数
        total: 0, // 当前在第几页
        pageSize: 4, // 每页显示多少条
        name: ''
      },
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getAllcash()
  },
  mounted() {},
  methods: {
    handleClick(row) {
      this.showDialog = true
      this.form = row
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.getAllcash()
      console.log(`当前页: ${val}`)
    },
    async getAllcash() {
      const res = await getAllcash()
      this.page.total = res.length
      // 获取所有用户
      const data = await getAllcash({
        _page: this.page.page,
        _limit: this.page.pageSize,
        name_like: this.page.name || undefined,
        _sort: 'id',
        _order: 'desc'
      })
      this.list = data
    },
    async save() {
      // 修改数据
      await editcash({ ...this.form, state: '已提现' })
      this.$message.success('操作成功')
      this.showDialog = false
    },
    async search() {
      // 查询
      if (
        !this.formInline.name.trim().length &&
        !this.formInline.controlNo.trim().length &&
        !this.formInline.state.trim().length &&
        !this.formInline.odd.trim().length
      ) {
        this.$message.warning('请先输入内容，再查询')
      } else {
        const data1 = await getAllCashByTags({
          name_like: this.formInline.name,
          controlNo_like: this.formInline.controlNo,
          state_like: this.formInline.state,
          odd_like: this.formInline.odd
        })
        this.list = data1
        this.$message.success('查询成功')
      }
    },
    async resetting() {
      // 重置数据
      this.getAllcash()
      this.$message.success('重置成功')
      this.formInline = {
        controlNo: '',
        name: '',
        state: '',
        odd: '',
        withdrawaltime: ''
      }
    },
    call() {
      // 取消
      this.showDialog = false
    }
  }
}
</script>

<style scoped>
.cash {
  margin: 8px;
  border-radius: 4px;
  border: 1px solid #f90;
  padding: 20px;
}
.searchs {
  background-color: #f90;
  color: #fff;
}
</style>
